<template>
  <div class="review-container">
    <!-- header -->
    <div class="review-header">
      <van-sticky>
        <!-- 筛选 -->
        <div class="review-search">
          <van-search
            v-model="queryParams.title"
            shape="round"
            background="rgb(120, 102, 156)"
            placeholder="请输入标题"
            @search="handleQuery"
          />
        </div>
        <!-- 切换 Tab -->
        <div class="review-tab">
          <van-tabs v-model:active="queryParams.isEnd" @change="handleQuery">
            <van-tab
              v-for="item in tabOptions"
              :key="item.id"
              :title="item.name"
              :value="item.id"
            >
            </van-tab>
          </van-tabs>
        </div>
      </van-sticky>
    </div>

    <div class="review-list" v-if="list.length">
      <div class="review-list_item" v-for="item in list" :key="item.id">
        <div class="item-left">
          <div class="left-title" :style="!item.title && 'color:red'">
            {{ item.title || "题目丢失啦" }}
          </div>
          <div class="left-books">{{ item.bookNames }}</div>
          <div class="left-time">
            {{ dayjs(item.time).format("YYYY-MM-DD HH:MM") }}
          </div>
        </div>
        <div class="item-right">
          <div class="btn-text" @click="handleReview(item)">复习</div>
        </div>
      </div>
      <div style="text-align: center; color: #666; font-size: 14px">
        没有更多了～
      </div>
    </div>

    <van-empty v-else description="暂无数据" />
  </div>
</template>

<script setup>
import { getReviewListForPages, putReview } from "@/service/review";
import { reactive, ref, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useAppStore } from "../../stores";
import { showToast, showSuccessToast } from "vant";
import dayjs from "dayjs";
import "./index.less";

const appStore = useAppStore();
const router = useRouter();
const route = useRoute();

appStore.setAppNav("navTitle", "复习");

const data = reactive({
  queryParams: {
    isEnd: 0,
    title: undefined,
    pageSize: 10,
    pageNum: 1,
  },
});
const tabOptions = ref([
  {
    id: 0,
    name: "进行中",
  },
  {
    id: 1,
    name: "已结束",
  },
]);

const { queryParams } = toRefs(data);

const total = ref(0);

const list = ref([]);

//获取列表数据
const loadData = async () => {
  const { data } = await getReviewListForPages(queryParams.value);
  list.value = data;
};

//搜索
const handleQuery = () => {
  loadData();
};

// 复习
const handleReview = async (item) => {
  const { data } = await putReview({
    id: item.id,
    isEnd: 1,
    time: dayjs(new Date()).format("YYYY-MM-DD HH:MM:ss"),
  });
  if (data == 1) {
    showSuccessToast({
      message: "复习成功！",
    });
    loadData();
  }
};

loadData();
</script>

<style lang="less" scoped>
.review-container {
  padding: 0;
  .review-header {
    .review-search {
    }
  }
}
</style>
